/*绘制矩形
1. fillRect()：绘制填充区域
2. strokeRect()：绘制边框
3. clearRect()：擦除画布区域
------------------------都接收4个参数：x坐标，y坐标，宽度，高度
- fillStyle：填充颜色
- strokeStyle：轮廓颜色
*/

let paper=document.getElementById('paper')
if(paper.getContext){
    let context=paper.getContext("2d")
    context.fillStyle="#ff0000"
    context.fillRect(10,10,50,50)
    context.strokeStyle="rgba(0,0,255,0.5)"
    context.lineWidth=10
    context.lineCap='square'
    context.strokeRect(30,30,50,50)
    
    context.clearRect(40,40,10,10)
}